<html>
<head>
<title>Test the Manifest media query "display-mode" features.</title>
<style type="text/css">

</style>
<script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.dumpAsText();

    function log(m) {
        document.getElementById('results').innerHTML += m + '<br>';
    }

    function testQueries()
    {
        var queries = [
            "(display-mode)",
            "(display-mode: browser)",
            "(display-mode: minimal-ui)",
            "(display-mode: standalone)",
            "(display-mode: fullscreen)",
            "(display-mode: fine)", // Unexpected values.
            "(display-mode: 1)",
            "(display-mode: 3%)",
            ];
        for (var index=0; index < queries.length; index++) {
            log("Query &quot;" + queries[index] + "&quot: " +
                window.matchMedia(queries[index]).matches);
        }
    }

    function runTests()
    {
        if (!window.internals)
            return;

        log("------------- with 'browser' display mode -------------");
        internals.settings.setDisplayModeOverride('browser');
        testQueries();

        log("------------- with 'minimal-ui' display mode -------------");
        internals.settings.setDisplayModeOverride('minimal-ui');
        testQueries();

        log("------------- with 'standalone' display mode -------------");
        internals.settings.setDisplayModeOverride('standalone');
        testQueries();

        log("------------- with 'fullscreen' display mode -------------");
        internals.settings.setDisplayModeOverride('fullscreen');
        testQueries();
    }

</script>
</head>
<body onload="runTests()">
    <p>Test the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">(display-mode: ...)</a> media features.

    <div id="results">
    </div>
</body>
</html>
